<template>
    <div>
        <div class="cont">
            <div class="cont1">
                <div class="cont11">
                    <div class="tit">空气质量分析</div>
                    <div id="schart1"></div>
                    <div id="schart0"></div>
                </div>
                <div class="cont12">
                    <div class="tit">实时数据</div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm1.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm1 }}ug/m³</div>
                            <div class="cell4">PM2.5</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm2.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm2 }}ug/m³</div>
                            <div class="cell4">PM10</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm3.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm3 }}℃</div>
                            <div class="cell4">温度</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm4.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm4 }}RH</div>
                            <div class="cell4">湿度</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm5.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm5 }}ug/m³</div>
                            <div class="cell4">TSP</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm6.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm6 }}ug/m³</div>
                            <div class="cell4">二氧化硫</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm7.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm7 }}ug/m³</div>
                            <div class="cell4">二氧化碳</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm8.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm8 }}级</div>
                            <div class="cell4">风力</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm9.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm9 }}m/s</div>
                            <div class="cell4">风速</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm10.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm10 }}</div>
                            <div class="cell4">风向</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm11.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm11 }}kpa</div>
                            <div class="cell4">大气压</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm12.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm12 }}g/m³</div>
                            <div class="cell4">臭氧</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm13.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm13 }}lux</div>
                            <div class="cell4">光照</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm14.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm14 }}g/m³</div>
                            <div class="cell4">一氧化碳</div>
                        </div>
                    </div>
                    <div class="cell">
                        <div class="cell1"><img src="../../assets/img/pm15.png" alt="" /></div>
                        <div class="cell2">
                            <div class="cell3">{{ pm15 }}db</div>
                            <div class="cell4">噪声</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cont2">
                <div class="cont13">
                    <div class="tit">环境指数趋势分析</div>
                    <div id="schart3"></div>
                </div>
                <div class="cont14">
                    <div class="tit">天气预报</div>
                    <div class="tq1">
                        <div class="tq11">{{ tq5 }} 实时{{ tq6 }}℃</div>
                        <div class="tq12">{{ tq2 }}</div>
                        <div class="tq13">{{ tq4 }}~{{ tq1 }}℃</div>
                        <div class="tq14">{{ tq8 }}{{ tq7 }}</div>
                        <div class="tq15">空气质量：{{ tq9 }} {{ tq3 }}</div>
                    </div>
                    <div class="tq2">
                        <div class="tq21">{{ tq51 }}</div>
                        <div class="tq22">{{ tq21 }}</div>
                        <div class="tq23">{{ tq41 }}~{{ tq01 }}℃</div>
                        <div class="tq24">{{ tq81 }}{{ tq71 }}</div>
                    </div>
                    <div class="tq2">
                        <div class="tq21">{{ tq52 }}</div>
                        <div class="tq22">{{ tq22 }}</div>
                        <div class="tq23">{{ tq42 }}~{{ tq02 }}℃</div>
                        <div class="tq24">{{ tq82 }}{{ tq72 }}</div>
                    </div>
                    <div class="tq2">
                        <div class="tq21">{{ tq53 }}</div>
                        <div class="tq22">{{ tq23 }}</div>
                        <div class="tq23">{{ tq43 }}~{{ tq03 }}℃</div>
                        <div class="tq24">{{ tq83 }}{{ tq73 }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import axios from 'axios';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            pm1: '--',
            pm2: '--',
            pm3: '--',
            pm4: '--',
            pm5: '--',
            pm6: '--',
            pm7: '--',
            pm8: '--',
            pm9: '--',
            pm10: '--',
            pm11: '--',
            pm12: '--',
            pm13: '--',
            pm14: '--',
            pm15: '--',
            tq1: '--',
            tq2: '--',
            tq3: '--',
            tq4: '--',
            tq41: '--',
            tq41: '--',
            tq41: '--',
            tq01: '--',
            tq02: '--',
            tq03: '--',

            tq21: '--',
            tq22: '--',
            tq23: '--',
            tq5: '--',
            tq51: '--',
            tq52: '--',
            tq53: '--',
            tq6: '--',
            tq7: '--',
            tq81: '--',
            tq71: '--',
            tq82: '--',
            tq72: '--',
            tq83: '--',
            tq73: '--',
            tq8: '--',
            tq9: '--',
            tq10: '--',
            tq11: '--',
            tq12: '--',
            tq22: '--',
            tq33: '--',
            tq44: '--',
            tq42: '--',
            tq43: '--',
            tq66: '',
            tq55: '--'
        };
    },
    methods: {},
    mounted() {
        var me = this;
        $.ajax({
            type: 'GET',
            url: 'https://www.tianqiapi.com/api/',
            data: 'version=v1&appid=53622763&appsecret=NFgVUwV2&cityid=101180805',
            dataType: 'JSON',
            error: function () {
                alert('网络错误');
            },
            success: function (res) {
                // console.log(res.data,88888)
                var data5 = res.data[0].air;
                var data6 = res.data[0].air_level;
                me.tq9 = res.data[0].air;
                me.tq3 = res.data[0].air_level;
                let myChart1 = echarts.init(document.getElementById('schart1'));
                let option1 = {
                    title: {
                        top: 20,
                        left: 'center',
                        text: '空气质量指数',
                        textStyle: {
                            //  padding: 5,				// 提示框浮层的文本样式。...
                            color: '#BDEDF4'
                        }
                    },
                    // backgroundColor: "#000",
                    tooltip: {
                        // 本系列特定的 tooltip 设定。
                        show: true,
                        formatter: '{b}：{c}%',
                        backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
                        borderColor: '#fff', // 提示框浮层的边框颜色。...
                        borderWidth: 10, // 提示框浮层的边框宽。...
                        padding: 25, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
                        textStyle: {
                            // 提示框浮层的文本样式。...
                            // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
                        }
                    },

                    series: [
                        {
                            name: '单仪表盘示例', // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                            type: 'gauge', // 系列类型
                            radius: '80%', // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                            center: ['50%', '60%'], // 仪表盘位置(圆心坐标)
                            startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                            endAngle: -45, // 仪表盘结束角度,默认 -45
                            clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
                            min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
                            max: 400, // 最大的数据值,默认 100 。映射到 maxAngle。
                            splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。

                            axisLine: {
                                // 仪表盘轴线(轮廓线)相关配置。
                                show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
                                lineStyle: {
                                    // 仪表盘轴线样式。
                                    color: [
                                        [0.125, '#3EFF25'],
                                        [0.25, '#E1FF22'],
                                        [0.375, '#FFD228'],
                                        [0.5, '#FFA337'],
                                        [0.75, '#FF4B00'],
                                        [1, 'red']
                                    ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                    width: 30 //轴线宽度,默认 30。
                                    // shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                    // shadowColor: "#ccc",		//阴影颜色。支持的格式同color。
                                }
                            },

                            splitLine: {
                                // 分隔线样式。
                                show: false, // 是否显示分隔线,默认 true。
                                length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
                                lineStyle: {
                                    // 分隔线样式。
                                    color: '#aaa', //线的颜色,默认 #eee。
                                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                    width: 2, //线度,默认 2。
                                    type: 'solid', //线的类型,默认 solid。 此外还有 dashed,dotted
                                    shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                    shadowColor: '#ccc' //阴影颜色。支持的格式同color。
                                }
                            },

                            axisTick: {
                                // 刻度(线)样式。
                                show: true, // 是否显示刻度(线),默认 true。
                                splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
                                length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
                                lineStyle: {
                                    // 刻度线样式。
                                    color: '#eee', //线的颜色,默认 #eee。
                                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                    width: 1, //线度,默认 1。
                                    type: 'solid' //线的类型,默认 solid。 此外还有 dashed,dotted
                                    // // shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                    // shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                                }
                            },

                            axisLabel: {
                                // 刻度标签。
                                show: true, // 是否显示标签,默认 true。
                                distance: 5, // 标签与刻度线的距离,默认 5。
                                color: '#fff', // 文字的颜色,默认 #fff。
                                fontSize: 15, // 文字的字体大小,默认 5。
                                formatter: '{value}' // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                            },

                            pointer: {
                                // 仪表盘指针。
                                show: true, // 是否显示指针,默认 true。
                                length: '70%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                                width: 5 // 指针宽度,默认 8。
                            },

                            itemStyle: {
                                // 仪表盘指针样式。
                                color: 'auto', // 指针颜色，默认(auto)取数值所在的区间的颜色
                                opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                                borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                                borderColor: '#000' // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                                // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                                // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                            },

                            // emphasis: {				// 高亮的 仪表盘指针样式
                            // 	itemStyle: {
                            // 		//高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
                            // 	}
                            // },

                            title: {
                                // 仪表盘标题。
                                show: true, // 是否显示标题,默认 true。
                                offsetCenter: [0, '20%'], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                                color: '#3EFF25', // 文字的颜色,默认 #333。
                                fontSize: 20,
                                fontWeight: 600 // 文字的字体大小,默认 15。
                            },

                            detail: {
                                // 仪表盘详情，用于显示数据。
                                show: true, // 是否显示详情,默认 true。
                                offsetCenter: [0, '50%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                                color: 'auto', // 文字的颜色,默认 auto。
                                fontSize: 40, // 文字的字体大小,默认 15。
                                formatter: '{value}' // 格式化函数或者字符串
                            },

                            data: [
                                {
                                    name: data6,
                                    value: data5
                                }
                            ]
                        }
                    ]
                };
                myChart1.setOption(option1);
                window.addEventListener('resize', function () {
                    myChart1.resize();
                });
            }
        });
        $.ajax({
            type: 'GET',
            url: 'https://www.tianqiapi.com/api/',
            data: 'version=v1&appid=53622763&appsecret=NFgVUwV2&cityid=101181410',
            dataType: 'JSON',
            error: function () {
                alert('网络错误');
            },
            success: function (res) {
                // console.log(res.data,777)
                me.tq1 = parseInt(res.data[0].tem1);
                me.tq01 = parseInt(res.data[1].tem1);
                me.tq02 = parseInt(res.data[2].tem1);
                me.tq03 = parseInt(res.data[3].tem1);
                me.tq2 = res.data[0].wea;
                me.tq21 = res.data[1].wea;
                me.tq22 = res.data[2].wea;
                me.tq23 = res.data[3].wea;

                me.tq4 = parseInt(res.data[0].tem2);

                me.tq41 = parseInt(res.data[1].tem2);
                me.tq42 = parseInt(res.data[2].tem2);
                me.tq43 = parseInt(res.data[3].tem2);
                me.tq5 = res.data[0].week;

                me.tq51 = res.data[1].week;
                me.tq52 = res.data[2].week;
                me.tq53 = res.data[3].week;
                me.tq6 = parseInt(res.data[0].tem);
                me.tq7 = res.data[0].win_speed;
                me.tq8 = res.data[0].win[0];

                me.tq71 = res.data[1].win_speed;
                me.tq81 = res.data[1].win[0];
                me.tq72 = res.data[2].win_speed;
                me.tq82 = res.data[2].win[0];
                me.tq73 = res.data[3].win_speed;
                me.tq83 = res.data[3].win[0];

                var data10 = res.data[0].date;
                var data11 = res.data[1].date;
                var data12 = res.data[2].date;
                var data13 = res.data[3].date;
                var data14 = res.data[4].date;
                var data15 = res.data[5].date;
                var data16 = res.data[6].date;
                var data110 = parseInt(res.data[0].tem1);
                var data111 = parseInt(res.data[1].tem1);
                var data112 = parseInt(res.data[2].tem1);
                var data113 = parseInt(res.data[3].tem1);
                var data114 = parseInt(res.data[4].tem1);
                var data115 = parseInt(res.data[5].tem1);
                var data116 = parseInt(res.data[6].tem1);
                var data220 = parseInt(res.data[0].tem2);
                var data221 = parseInt(res.data[1].tem2);
                var data222 = parseInt(res.data[2].tem2);
                var data223 = parseInt(res.data[3].tem2);
                var data224 = parseInt(res.data[4].tem2);
                var data225 = parseInt(res.data[5].tem2);
                var data226 = parseInt(res.data[6].tem2);

                // console.log(data116,555);

                ajax('Environment/HJFXLK', { deviceId: 21043007 }, function (data) {
                    var data0 = data;

                    var data1 = data0.map((a) => a.datatime);

                    var data2 = data0.map((a) => a.pm25);
                    var data3 = data0.map((a) => a.pm10);
                    var data4 = data0.map((a) => a.tsp);
                    let myChart3 = echarts.init(document.getElementById('schart3'));
                    let options3 = {
                        // backgroundColor: 'rgba(240,240,240,1)',
                        title: {
                            // text: '人员管理趋势图', //主标题
                            textStyle: {
                                color: '#000', //颜色
                                fontStyle: 'normal', //风格
                                fontWeight: '400', //粗细
                                fontFamily: 'Microsoft yahei', //字体
                                fontSize: 22, //大小
                                align: 'center' //水平对齐
                            },
                            // subtext:'副标题',      //副标题
                            // subtextStyle:{          //对应样式
                            //     color:'#F27CDE',
                            //     fontSize:14
                            // },
                            itemGap: 7
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            textStyle: {
                                color: '#fff', //颜色
                                fontStyle: 'normal', //风格
                                fontWeight: '400', //粗细
                                fontFamily: 'Microsoft yahei', //字体
                                fontSize: 18, //大小
                                align: 'center' //水平对齐
                            },
                            data: ['PM2.5', 'PM10', 'TSP']
                        },

                        grid: {
                            left: '2%',
                            right: '5%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                axisLine: {
                                    lineStyle: { color: 'rgb(250,250,250)' } // x轴坐标轴颜色
                                },

                                axisLabel: {
                                    color: '#fff',
                                    formatter: '{value}', //单位
                                    show: true,
                                    textStyle: {
                                        color: '#c3dbff', //更改坐标轴文字颜色
                                        fontSize: 14, //更改坐标轴文字大小
                                        fontWeight: 500
                                    }
                                },
                                name: '时间点',
                                type: 'category',
                                boundaryGap: false,
                                data: data1
                            }
                        ],
                        yAxis: [
                            {
                                axisLine: {
                                    lineStyle: { color: 'rgb(250,250,250)' } // x轴坐标轴颜色
                                },
                                axisLabel: {
                                    lineStyle: { color: 'rgb(250,250,250)' }, // x轴坐标轴颜色
                                    formatter: '{value}', //单位
                                    show: true,
                                    textStyle: {
                                        color: '#c3dbff', //更改坐标轴文字颜色
                                        fontSize: 14, //更改坐标轴文字大小
                                        fontWeight: 500
                                    }
                                },
                                name: '值ug/m³',
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'PM2.5',
                                type: 'line',
                                stack: '总量',
                                smooth: true,
                                symbol: 'circle',

                                symbolSize: 8, //拐点圆的大小
                                color: ['#44b9f6'], //折线条的颜色
                                data: data3,
                                areaStyle: {
                                    // type: 'default',
                                    // color:'#70eeff'
                                    normal: {
                                        //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {
                                                offset: 0,
                                                color: '#44b9f6'
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#73edff'
                                            },
                                            {
                                                offset: 1,
                                                color: '#f0f7ff'
                                            }
                                        ])
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 4,
                                        color: '#296aff', // 会设置点和线的颜色，所以需要下面定制 line
                                        borderColor: '#7be7ff' // 点边线的颜色
                                    }
                                },
                                lineStyle: { color: '#65bfff' }
                            },
                            {
                                name: 'PM10',
                                type: 'line',
                                stack: '总量',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 8, //拐点圆的大小
                                color: ['#E6A23C'], //折线条的颜色

                                data: data2,
                                // areaStyle: {
                                //     type: 'default',
                                //     color: 'rgba(240,240,240,1)'
                                // },
                                lineStyle: { color: '#E6A23C', type: 'solid' },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 4,
                                        color: '#E6A23C', // 会设置点和线的颜色，所以需要下面定制 line
                                        borderColor: '#ffebee' // 点边线的颜色
                                    }
                                }
                            },
                            {
                                name: 'TSP',
                                type: 'line',
                                stack: '总量',
                                smooth: true,
                                symbol: 'circle',
                                symbolSize: 8, //拐点圆的大小
                                color: ['blue'], //折线条的颜色

                                data: data4,
                                // areaStyle: {
                                //     type: 'default',
                                //     color: 'rgba(240,240,240,1)'
                                // },
                                // lineStyle: { color: 'rgb(252, 20, 20)', type: 'dashed' },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 4,
                                        color: '#409EFF', // 会设置点和线的颜色，所以需要下面定制 line
                                        borderColor: '#ffebee' // 点边线的颜色
                                    }
                                }
                            }
                        ]
                    };
                    myChart3.setOption(options3);
                    window.addEventListener('resize', function () {
                        myChart3.resize();
                    });
                });
                // .catch(function(error) {
                //     console.log(error);
                // });
            }
        });

        ajax('Environment/FindEnvironment', { deviceId: 21043007 }, (data) => {
            this.pm1 = data.data.pm25;
            this.pm2 = data.data.pm10;
            this.pm3 = data.data.tem;
            this.pm4 = data.data.hum;
            this.pm5 = data.data.tsp;
            this.pm11 = data.data.atm;
            this.pm15 = data.data.noise;
            this.pm8 = data.data.wp;
            this.pm9 = data.data.ws;
            this.pm10 = data.data.wd;
        });
    }
};
</script>

<style scoped>
.cell3 {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(80, 204, 240, 1);
    width: 80px;
    height: 25px;
    line-height: 25px;
}
.cell4 {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
    width: 80px;
    height: 20px;
    line-height: 20px;
    margin-left: 5px;
}
.cell2 {
    margin-left: 15px;
    padding-top: 40px;
    float: left;
    height: 80px;
    width: 80px;
}
.cell1 img {
    margin-top: 3px;
}
.cell1 {
    margin-left: 20px;
    padding-top: 40px;
    float: left;
    height: 80px;
    width: 40px;
}
.cell {
    float: left;
    margin-left: 24px;
    margin-top: 5px;
    width: 180px;
    height: 120px;
    /* background: rgb(179, 172, 171); */
}
#schart1 {
    float: left;
    margin-left: 15px;
    width: 500px;
    height: 400px;
    /* background: tomato; */
}
#schart0 {
    margin-top: 59px;
    margin-left: -20px;
    float: left;
    width: 200px;
    height: 300px;
    background: url(../../assets/img/you.png) no-repeat;
    background-size: 100% 100%;
}
.tit {
    margin-left: 26px;
    margin-top: 24px;
    width: 100%;
    height: 36px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(164, 233, 255, 1);
    line-height: 36px;
    /* background: rgb(28, 35, 36); */
}
.cont {
    width: 97%;
    height: 908px;
    margin-left: 1.5%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.cont1 {
    width: 100%;
    height: 471px;
    display: flex;
    justify-content: space-between;
}
.cont2 {
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: space-between;
}
.cont11 {
    width: 755px;
    height: 471px;
    background: url(../../assets/img/wl1.png) no-repeat;
    background-size: 100% 100%;
}
.cont12 {
    width: 1069px;
    height: 471px;
    background: url(../../assets/img/wl2.png) no-repeat;
    background-size: 100% 100%;
}
.cont13 {
    width: 1150px;
    height: 415px;
    background: url(../../assets/img/wl3.png) no-repeat;
    background-size: 100% 100%;
}
#schart3 {
    margin-left: 30px;
    width: 1079px;
    height: 350px;
    /* background: turquoise; */
}
.cont14 {
    width: 675px;
    height: 415px;
    background: url(../../assets/img/wl4.png) no-repeat;
    background-size: 100% 100%;
}
.tq1 {
    float: left;
    margin-left: 50px;
    width: 200px;
    height: 350px;
}
.tq2 {
    margin-left: 10px;
    float: left;
    width: 120px;
    height: 350px;
    /* background: rgb(75, 124, 101); */
}
.tq21 {
    margin-top: 90px;
    width: 100%;
    height: 30px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 241, 255, 1);
}
.tq22 {
    margin-top: 10px;
    width: 100%;
    height: 70px;
    line-height: 50px;
    text-align: center;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: rgb(216, 185, 45);
}
.tq23 {
    margin-top: 5px;
    width: 100%;
    height: 30px;
    line-height: 50px;
    text-align: center;

    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
}
.tq24 {
    margin-top: 10px;
    width: 100%;
    height: 20px;
    line-height: 50px;
    text-align: center;
    font-size: 11px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
}
.tq11 {
    margin-top: 40px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;

    color: rgb(238, 177, 84);
}
.tq12 {
    margin-top: 30px;
    width: 100%;
    height: 70px;
    line-height: 50px;
    text-align: center;
    font-size: 40px;
    font-family: Source Han Sans CN;
    font-weight: 500;

    color: rgb(243, 109, 85);
}
.tq13 {
    margin-top: 10px;
    width: 100%;
    height: 70px;
    line-height: 36px;
    text-align: center;
    font-size: 36px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
}
.tq14 {
    margin-top: 10px;
    width: 100%;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
}
.tq15 {
    margin-top: 5px;
    width: 100%;
    height: 20px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: rgba(198, 246, 255, 1);
}
</style>